import React from 'react';
import {Button, Form, Input,message,Select, AutoComplete} from 'antd';
import qs from 'qs';
import * as Constant from '../../../../common/const';
import * as Request from '../../../../Server/Upgrade';

const FormItem = Form.Item;
const { TextArea } = Input;
const Option = Select.Option;

class CollectInfoForm extends React.Component {
    constructor(props) {
        super(props);
    }

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                const request = values.id ? Request.collectInfoUpdate : Request.collectInfoSave;
                request(qs.stringify(values)).then(res => {
                    if (Constant.REQUEST_SUCCESS == res.code) {
                        message.success(Constant.OPERATION_SUCCESS_TIP, Constant.AUTO_DISAPPEAR_TIME);
                        this.props.cancel(true);
                    }
                });
            }
        });
    }
    validator = (rule, value, callback) => {
        const id = this.props.form.getFieldValue('id');
        if(value.length>255){
            callback('收集信息长度不能超过255个字符!');
            return ;
        }
        Request.collectInfoValidator(qs.stringify({id:id,idMain: value,collectId:this.props.collectId})).then(res => {
            if (Constant.REQUEST_SUCCESS == res.code) {
                if (res.data) {
                    callback();
                    return ;
                } else {
                    callback('验证不通过');
                    return ;
                }
            } else {
                callback(res.msg);
                return ;
            }
        })
    }

    validatorFun = (rule, value, callback) => {
        if(value.length>255){
            callback('函数长度不能超过255个字符!');
            return ;
        }
        callback();
    }

    render() {
        const {getFieldDecorator} = this.props.form;
        const ipFormItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 6},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 15},
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                xs: {
                    span: 24,
                    offset: 0,
                },
                sm: {
                    span: 16,
                    offset: 8,
                },
            },
        };
        const idMainData = [
            "dm", "action", "pnum", "p0", "p1", "p2", "p3", "p4", "p5", "p6", "p7", "p8", "sn", "hdid"
        ];

        const funData = [
            "rreg", "rini", "rxml", "rfeature", "rfeaturehead", "crc", "md5", "sn", "distnum", "version", 
            "ksorun", "from", "dowmcomplete", "installsucceed", "speed", "resumecount", "param", "guid", 
            "updatemode", "rtempstatus", "hdid"
        ];  

        return (
            <div>
                <Form onSubmit={this.handleSubmit}>
                    <FormItem>
                        {getFieldDecorator('id', {
                            initialValue: this.props.collectInfo && this.props.collectInfo.id,
                        })(
                            <Input type={'hidden'}/>
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('collectId', {
                            initialValue: this.props.collectId,
                        })(
                            <Input type={'hidden'}/>
                        )}
                    </FormItem>
                    <FormItem label={'收集信息:'} {...ipFormItemLayout} >
                        {getFieldDecorator('idMain', {
                            rules: [{
                                required: true, message: '请选择收集信息!',
                            },{
                                validator: this.validator,
                            }],
                            initialValue: this.props.collectInfo && this.props.collectInfo.idMain,
                        })(
                            <AutoComplete 
                                dataSource={idMainData}
                                style={{ width: '100%' }}
                            />
                        )}
                    </FormItem>
                    <FormItem label={'函数:'} {...ipFormItemLayout} >
                        {getFieldDecorator('fun', {
                            rules: [{
                                required: true, message: '请选择函数!',
                            },{
                                validator: this.validatorFun,
                            }],
                            initialValue: this.props.collectInfo && this.props.collectInfo.fun,
                        })(
                            <AutoComplete 
                                dataSource={funData}
                                style={{ width: '100%' }}
                            />
                        )}
                    </FormItem>
                    <FormItem label={'参数:'} {...ipFormItemLayout} >
                        {getFieldDecorator('param', {
                            initialValue: this.props.collectInfo && this.props.collectInfo.param,
                        })(
                            <Input maxLength={255}/>
                        )}
                    </FormItem>
                    <FormItem label={'备注:'} {...ipFormItemLayout} >
                        {getFieldDecorator('remark', {
                            initialValue: this.props.collectInfo && this.props.collectInfo.remark,
                        })(
                            <TextArea  rows={4} cols={30}
                                       placeholder={'备注,250字以内'}
                                       maxlength={250}
                            />
                        )}
                    </FormItem>
                    <FormItem {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">保存</Button>
                        <Button type="primary" onClick={this.props.cancel}>返回</Button>
                    </FormItem>
                </Form>
            </div>
        );
    }
}

const RegisterCollectInfoForm = Form.create()(CollectInfoForm);
export default RegisterCollectInfoForm;